<template>
	<view class="bg-white" style="width: 100%;height: 100%;">
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-red-yellow" :isBack="true" :isHome="true" backText="返回" :title="title"></cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="introduce-section">
				<text class="title">{{ info.title }}</text>
				<view class="introduce">
					<view class="text-cut" style="max-width: 380rpx;padding-right: 16rpx;">{{ info.publisher ? info.publisher : '详情' }}</view>
					<view>{{ showCount }}阅读</view>
					<view>{{ info.publishTimeText }}</view>
				</view>
				<view v-if="showContent" style="padding-top: 20rpx;"><u-parse :html="content" :lazy-load="true"></u-parse></view>
				<image v-if="imgage && url" :src="url" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				<video v-if="video && url" class="video" :src="url" controls objectFit="fill" :autoplay="false"></video>
				<view v-if="showGotoFile" class="text-center text-gray"><text @tap="gotoFile">点此可查看原文件</text></view>
				<view style="padding-top: 30rpx;display: flex;justify-content:space-between;align-items:center;">
					<view class="text-left text-gray">
						<text class="basefont icon-like text-gray" style="padding-right: 10rpx;"></text>
						{{ likeCount ? likeCount : 0 }}
						<text class="basefont icon-star text-gray" style="padding: 0 10rpx 0 20rpx;"></text>
						{{ collectCount ? collectCount : 0 }}
					</view>
					<view class="text-right text-gray"><text @tap="gotoReport" style="font-size: 24rpx;">我要举报</text></view>
				</view>

				<view class="comment">
					<view class="title">
						<text>全部评论</text>
						<text class="count" v-if="info.commentCount && info.commentCount > 0">({{ info.commentCount }})</text>
					</view>
					<view v-if="showComment" style="padding-bottom: 110rpx;">
						<comment-item v-for="(item, index) in commentList" :key="index" :info="item" @reply="reply($event)"></comment-item>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="cu-bar foot-zh input" style="height: 110rpx;padding-right:0rpx">
			<view class="round" style="width: 380rpx;height: 70rpx;margin-left: 30rpx;background-color: #f2f2f2;color: #999999;display: flex;align-items: center;" @tap="comment">
				<text style="margin-left: 38rpx;">发表评论</text>
			</view>
			<view class="action">
				<text class="basefont icon-comment text-gray" @click="gotoComment"></text>
				<text :class="likeFlag ? 'text-red basefont icon-like-fill' : 'text-gray basefont icon-like'" @click="articleLike"></text>
				<text :class="collectFlag ? 'icon-star-fill' : 'text-gray basefont icon-star'" @click="articleCollect"></text>
				<button open-type="share" class="cu-btn bg-white" style="width: 60rpx;padding-left: 40rpx;" hover-class="none" @tap="share">
					<text class="basefont icon-share text-gray" style="font-size: 42rpx;"></text>
				</button>
			</view>
		</view>
		<!-- 分享示例 -->
		<uni-popup ref="h5Share" type="share" @change="shareChange" @close="shareClose"><uni-popup-share title="分享到" @select="shareSelect"></uni-popup-share></uni-popup>

		<uni-popup ref="addComment" @close="closeComment" type="bottom">
			<view class="add-comment">
				<view class="info">
					<view class="input">
						<textarea
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
							:maxlength="200"
							:focus="addCommentFocus"
							v-model.trim="commentContent"
							placeholder-class="input-placeholder-class"
							:placeholder="replyFlag ? '回复 ' + parentNikeName + '：' : '发表评论'"
						/>
					</view>
					<view class="add">
						<button class="cu-btn bg-gradual-red-yellow round" @click="addCommentOrReply()" style="width: 150rpx;">{{ parentCommentId > 0 ? '回复' : '发表' }}</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import api from '@/api/system/article.js';
import store from '@/store';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import util from '@/common/util/util.js';
import wechatMP from '@/common/sdk/wechatMP.js';
export default {
	mixins: [MescrollMixin],
	onShow() {
		this.headerKey += 1;
		this.downCallback();
	},
	data() {
		return {
			headerKey:0,
			title: '文章详情',
			accessToken: store.state.hh_token,
			imgage: false,
			video: false,
			showCount: 0,
			showContent: false,
			showGotoFile: false,
			contentType: 'richText',
			content: ``,
			url: '',
			articleId: null,
			info: {},
			downOption: {
				use: true,
				auto: true //是否在初始化后,自动执行downCallback; 默认true
			},
			likeFlag: false, //点赞
			collectFlag: false, //收藏
			commentList: [],
			showShareTip: false,
			showBrowserShareTip: false,
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					use: true,
					icon: null,
					tip: '暂无评论，快来抢占沙发吧~'
				}
			},
			likeCount: 0,
			collectCount: 0,
			addCommentFocus: false,
			commentContent: '',
			replyFlag: false,
			parentNikeName: '匿名',
			parentCommentId: null,
			replyId: null,
			showComment: false
		};
	},
	onLoad: function(option) {
		if(!option.articleId){
			uni.showToast({
			  icon: 'none',
			  title: '系统异常：未传入详情id',
			  duration:5000
			})
			return
		}
		this.articleId = option.articleId;
		const data = {};
		data.articleId = option.articleId;
		// 获取详情请求
		this.$http
			.post(api.getArticleDetail, data)
			.then(res => {
				this.info = res.result;
				this.title = this.info.title;
				let showCount = this.info.showCount ? this.info.showCount : 0;
				this.showCount = showCount;
				this.likeCount = this.info.likeCount ? this.info.likeCount : 0;
				this.collectCount = this.info.collectCount ? this.info.collectCount : 0;
				this.content = res.result.articleContent;
				if (this.content) {
					this.showContent = true;
				}
				this.likeFlag = res.result.likeFlag;
				this.collectFlag = res.result.collectFlag;
				if (this.info.contentType) {
					this.contentType = this.info.contentType;
					if (this.contentType == 'richText') {
					} else if (this.contentType == 'file') {
						this.url = this.info.fileUrl;
						if (this.info.fileType == 'pdf') {
							this.showGotoFile = true;
						} else if (this.info.fileType == 'imgage') {
							this.imgage = true;
						} else if (this.info.fileType == 'video') {
							this.video = true;
						}
					}
				}
				//this.initMPShare(); //公众号分享
			})
			.catch(error => {});

		//记录阅读
		setTimeout(() => {
			this.$http
				.post(api.articleRead, data)
				.then(res => {
					this.showCount = showCount + 1;
				})
				.catch(error => {});
		}, 100);
	},
	/*小程序分享*/
	onShareAppMessage() {
		return {
			path: 'pages/system/article/articleDetail?articleId=' + this.articleId,
			success: function(e) {},
			title: this.title,
			imageUrl: this.info.imgUrl ? this.info.imgUrl : this.info.imgBigUrl
		};
	},
	methods: {
		gotoFile() {
			this.$Router.push({ path: '/pages/system/article/articleFile', query: this.info });
		},
		/*下拉刷新的回调 */
		downCallback() {
			//联网加载数据
			this.showComment = false;
			if(this.mescroll){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			}
			
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			const data = {};
			data.pageNum = page.num;
			data.pageSize = page.size;
			this.getCommentList(data);
		},
		getCommentList(data) {
			data.articleId = this.articleId;
			data.replyFlag = '0';
			this.$http
				.post(api.getCommentList, data)
				.then(res => {
					//联网成功的回调,隐藏下拉刷新的状态
					this.showComment = true;
					const result = res.result;
					//设置列表数据
					if (this.mescroll.num == 1) {
						this.commentList = []; //如果是第一页需手动置空列表
					}
					this.commentList = this.commentList.concat(result.list);
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					const hasNextPage = result.hasNextPage;
					this.mescroll.endSuccess(result.size, hasNextPage);

					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					this.$nextTick(() => {
						this.mescroll.endSuccess(result.size);
					});
				})
				.catch(error => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				});
		},
		articleLike() {
			if (!this.accessToken || this.accessToken == '') {
				uni.navigateTo({
					url: '/pages/system/login/login?goBackFlag=' + 'true'
				});
			}
			const data = {};
			data.articleId = this.articleId;
			let likeApi = '';
			if (this.likeFlag) {
				likeApi = api.articleDelLike;
			} else {
				likeApi = api.articleLike;
			}
			this.$http
				.post(likeApi, data)
				.then(res => {
					this.likeFlag = !this.likeFlag;
					let likeCount = this.likeCount;
					if (this.likeFlag) {
						likeCount = likeCount + 1;
					} else {
						if (likeCount > 0) {
							likeCount = likeCount - 1;
						}
					}
					this.likeCount = likeCount;
				})
				.catch(error => {});
		},
		articleCollect() {
			if (!this.accessToken || this.accessToken == '') {
				uni.navigateTo({
					url: '/pages/system/login/login?goBackFlag=' + 'true'
				});
			}
			const data = {};
			data.articleId = this.articleId;
			let collectApi = '';
			if (this.collectFlag) {
				collectApi = api.articleDelCollect;
			} else {
				collectApi = api.articleCollect;
			}
			this.$http
				.post(collectApi, data)
				.then(res => {
					this.collectFlag = !this.collectFlag;
					let collectCount = this.collectCount;
					if (this.collectFlag) {
						collectCount = collectCount + 1;
					} else {
						if (collectCount > 0) {
							collectCount = collectCount - 1;
						}
					}
					this.collectCount = collectCount;
				})
				.catch(error => {});
		},
		gotoComment() {
			if (!this.accessToken || this.accessToken == '') {
				uni.navigateTo({
					url: '/pages/system/login/login?goBackFlag=' + 'true'
				});
			}
			const data = {};
			data.articleId = this.articleId;
			data.commentCount = this.info.commentCount;
			this.$Router.push({ path: '/pages/system/article/comment', query: data });
		},
		gotoReport() {
			if (!this.accessToken || this.accessToken == '') {
				uni.navigateTo({
					url: '/pages/system/login/login?goBackFlag=' + 'true'
				});
			}
			const data = {};
			data.articleId = this.articleId;
			this.$Router.push({ path: '/pages/system/article/ariticleReport', query: data });
		},
		/*分享*/
		share() {
			// #ifdef H5
			if (util.isWechatOrQQ()) {
				this.showShareTip = true;
			} else {
				this.$refs.h5Share.open();
			}

			// #endif
			// #ifdef MP
			uni.showShareMenu();
			// #endif
		},
		shareChange(e) {
			let show = e.show;
		},
		shareSelect() {},
		reply(e) {
			if (!this.replyFlag) {
				this.replyFlag = true;
				this.commentContent = '';
			} else {
				if (this.replyId != e.commentId) {
					this.commentContent = '';
				}
			}
			if (e.parentCommentId) {
				this.parentCommentId = e.parentCommentId;
			} else {
				this.parentCommentId = e.commentId;
			}
			this.parentNikeName = e.nikeName ? e.nikeName : '匿名';
			this.replyId = e.commentId;
			this.openAddComment();
		},
		comment() {
			if (this.replyFlag) {
				this.commentContent = '';
				this.replyFlag = false;
			}
			this.openAddComment();
		},
		/*初始化添加评论*/
		openAddComment() {
			if (!this.accessToken || this.accessToken == '') {
				uni.navigateTo({
					url: '/pages/system/login/login?goBackFlag=' + 'true'
				});
			}
			this.$refs.addComment.open();
			setTimeout(() => {
				this.addCommentFocus = true;
			}, 200);
		},
		closeComment() {
			this.commentContent = '';
			console.log(this.replyFlag);
			if (this.replyFlag) {
				this.replyFlag = false;
				this.parentNikeName = '匿名';
			}
			this.addCommentFocus = false;
		},
		/*添加评论或回复*/
		addCommentOrReply() {
			if (!this.commentContent || this.commentContent == '') {
				this.$refs.uToast.show({
					title: '发表内容不能为空',
					// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'warning',
					position: 'top',
					// 如果不需要图标，请设置为false
					icon: false
				});
				return;
			}
			this.addComment();
		},

		/*添加评论*/
		addComment() {
			const data = {};
			data.articleId = this.articleId;
			if (this.replyFlag) {
				data.replyFlag = '1';
			} else {
				data.replyFlag = '0';
			}
			data.commentContent = this.commentContent;
			data.parentCommentId = this.parentCommentId;
			data.replyId = this.replyId;
			this.$http
				.post(api.addComment, data)
				.then(res => {
					this.$refs.addComment.close();
					this.closeComment();
					this.downCallback();
				})
				.catch(error => {});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 简介 */
.introduce-section {
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx;
	background: #fff;
	line-height: 1.5;

	.title {
		font-size: 36rpx;
		color: #303133;
		margin-bottom: 16rpx;
	}
	.introduce {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #909399;
		text {
			margin-right: 16rpx;
		}
	}
	.comment {
		padding: 20rpx 0 0 0;
		background: #fff;
		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #303133;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
			text {
				padding-bottom: 20rpx;
				line-height: normal;
			}
			.count {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				color: #909399;
				margin-left: 10rpx;
				line-height: normal;
			}
		}
	}
}
.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	.info {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 20rpx 20rpx;
		.input {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			background: #f2f2f2;
			border-radius: 40rpx 40rpx 0 40rpx;
			padding: 20rpx 32rpx 20rpx;
			line-height: normal;
			textarea {
				//padding: 10rpx 0;
				width: 100%;
				font-size: 28rpx;
				line-height: 42rpx;
				background: #f2f2f2;
			}
		}
		.add {
			flex-grow: 0;
			flex-shrink: 0;
			width: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}
		.cancel {
			position: absolute;
			right: 10rpx;
			top: 2rpx;
			.icon {
				font-size: 40rpx;
				color: #ccc;
			}
		}
	}
}
.input-placeholder-class {
	color: $uni-text-color-placeholder;
	font-size: 28rpx;
}
</style>
